前端模块化规范

一、js模块化

命名空间
commonJS
AMD/CMD/UMD
ES6 module

二、命名空间

库名.类别名.方法名

var NameSpace = {}

NameSpace.type = NameSpace.type || {}

NameSpace.type.method = function () {

}

三、commonJS规范

一个文件为一个模块，通过module.export暴露快接口，通过require引入模块，同步执行

commonJS 文档

示例：

const Router = require('./router/route')

export = module.exports = createApplication;

四、AMD规范

Async Module Definition

使用define定义模块

使用require加载模块

RequireJS

依赖前置，提前执行

AMD规范文档

示例：

define(
    // 模块名字
    "alpha",
    // 模块输出
    ["require", "exports", "beta"],
    // 模块输出
    function (require, exports, beta) {
        exports.verb = function () {
            return beta.verb();
            return require("beta").verb();
        }
    }
)

define(
    ["a", "b", "c"],
    function (a, b, c) {
        // 等于在最前面声明并初始化了要用到的模块
        if (false) {
            // 即使没用到模块b，但b还是提前执行了
            b.foo();
        }
    }
)

五、CMD

Common module definition

一个文件为一个模块

使用define来定义一个模块

使用require来加载一个模块

SeaJS

尽可能懒加载

示例：

// 所有模块都通过define定义
define(function (require, exports, module) {
    // 通过require引入模块
    var $ = require('jquery');
    var Spining = require('./spinning');

    // 通过exports对外提供接口
    exports.doSomething =

    // 或者通过module.exports 提供整个接口
    module.exports =
})

六、UMD

Universal Module definition

通用解决方法

三个步骤： 

1.判断是否支持AMD

2.判断是否支持CommonJS

3.如果都没有，使用全局变量

示例：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define([], factory);
    } else if (typeof exports == 'object') {
        module.exports = factory();
    } else {
        root.returnExports = factory()
    }
}(this, function () {
    return {}
}))

七、ESM

esmascript module

一个文件一个模块

export / import

示例：

// 加载模块的变量或方法
import theDefault, {named1, named2} from 'src/mylib'
import theDefault from 'src/mylib'
import {named1, named2} from 'src/mylib'

// 引入模块进来并且将named1命名为Named1
import {named1 as myNamed1} from 'src/mylib'

// 加载模块里全部的变量和方法
import * as mylib from 'src/mylib';

// 只加载，不做任何处理
import 'src/mylib'

// 定义一个模块，暴露的接口
export var name1 = "Bob";
export let name2 = "Bob";
export let NAME3 = "Bob";

export function myFunc() {}
export class MyClass {}

// 可以选择暴露
const USERNAME = "Bob";
function myFunc() {}

export {USERNAME, myFunc};
export {USERNAME as NAME, myFunc as Fn};

// 引入其他文件的变量或方法，再暴露出去
export * from "src/other_module";
export {foo, bar} from 'src/other_module';
export {foo as myFoo, bar} from 'src/other_module';

export {foo as myFoo, bar} from 'src/other_module'

八、webpack支持

AMD(require)

ES Modules 推荐

CommonJS

九、CSS模块化

OOCSS
SMACSS
Atomic CSS
MCSS
AMCSS
BEM
CSS modules

Atomic CSS 每个类都是独立的

MCSS 多层级的css

AMCSS 针对属性来写css

BEM：Block，Element，Modifier

<!-- BEM -->
<button class="button"> 
    Default Button 
</button>

<button class="button button--state-success">
    Success Button 
</button>

<button class="button button--state-danger">
    Danger Button 
</button>